<style lang="less">
    @import "../../../styles/table.less";
</style>
<template>
    <div class="search">
        <Row>
            <Col span="5">
                <Card title="行业类型" style="height:100%">
                    <Row class="operation">
                        <Button @click="addIndustryType" type="primary" icon="md-add">添加行业</Button>
                        <Dropdown @on-click="handleDropdown">
                            <Button>更多
                                <Icon type="md-arrow-dropdown"/>
                            </Button>
                            <DropdownMenu slot="list">
                                <DropdownItem name="editIndustryType">编辑行业</DropdownItem>
                                <DropdownItem name="delIndustryType">删除行业</DropdownItem>
                                <DropdownItem name="refreshIndustry">刷新</DropdownItem>
                            </DropdownMenu>
                        </Dropdown>
                    </Row>
                    <Alert show-icon>
                        当前选择： <span class="select-title">{{editTitle}}</span>
                    </Alert>
                    <div class="tree-bar">
                        <Tree ref="tree" :data="treeData" @on-select-change="selectTree"></Tree>
                    </div>
                </Card>
            </Col>
            <Col :span="span">
                <Card title="平台证书">
                    <Row @keydown.enter.native="handleSearch">
                        <Form ref="certificateName" :model="searchForm" inline :label-width="70">
                            <Form-item label="标题" prop="courseTitle">
                                <Input type="text" v-model="searchForm.certificateName" placeholder="请输入证书名称" clearable style="width: 200px"/>
                            </Form-item>
                            <Form-item style="margin-left:-35px;" class="br">
                                <Button @click="handleSearch" type="primary" icon="ios-search">搜索</Button>
                                <Button @click="handleReset">重置</Button>
                                <a class="drop-down" @click="dropDown">{{dropDownContent}}
                                    <Icon :type="dropDownIcon"></Icon>
                                </a>
                            </Form-item>
                        </Form>
                    </Row>
                    <Row class="operation">
                        <Tooltip content="请选项分类" placement="top" :disabled="!addExamBtn">
                            <Button @click="add" type="primary" :disabled="addExamBtn" icon="md-add">添加</Button>
                        </Tooltip>
                        <circleLoading v-if="operationLoading"/>
                    </Row>
                    <Row>
                        <Table :loading="loading" border :columns="columns"  size="small"  :data="data" sortable="custom" @on-sort-change="changeSort" @on-selection-change="showSelect" ref="table"></Table>
                    </Row>
                    <Row type="flex" justify="end" class="page">
                        <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10,20,50]" size="small" show-total show-elevator show-sizer></Page>
                    </Row>
                </Card>
                <Modal :title="industryModalTitle" v-model="industryModalVisible" :mask-closable="false" :width="500" :styles="{top: '30px'}">
                    <Form ref="form" :model="form" :label-width="70" :rules="formValidate">
                        <FormItem label="行业名称" prop="enumName">
                            <Input v-model="form.enumName" placeholder="请输入行业名称"/>
                        </FormItem>
                        <FormItem label="行业编码" prop="enumCode">
                            <Input v-model="form.enumCode" placeholder="请输入行业编码"/>
                        </FormItem>
                        <FormItem label="行业排序" prop="sortOrder">
                            <Input v-model="form.sortOrder" placeholder="请输入行业排序"/>
                        </FormItem>
                    </Form>
                    <div slot="footer">
                        <Button type="text" @click="industryModalVisible=false">取消</Button>
                        <Button type="primary" :loading="submitLoading" @click="handelSubmitDict">提交</Button>
                    </div>
                </Modal>
            </Col>
        </Row>
        <certificate-drawer ref="certificateDrawer"></certificate-drawer>
        <transfercourseManage ref="transfercourseManage"></transfercourseManage>
        <continuingManage ref="continuingManage"></continuingManage>
    </div>
</template>

<script>
    import circleLoading from "../../my-components/circle-loading.vue";
    import {certificateList, addIndustry, getAllTypeList,deleteIndustry} from "@/api/bus";
    import certificateDrawer from "./certificate-drawer";
    import transfercourseManage from "./transfercourse/transfercourseManage";
    import continuingManage from "./continuing/continuingManage";
    export default {
        name: "certificate-manage",
        components: {
            certificateDrawer,
            transfercourseManage,
            continuingManage,
            circleLoading
        },
        data() {
            return {
                span: 19,
                addExamBtn: true,
                loading: false, // 表单加载状态
                operationLoading: false,
                drop: false,
                selectCount: 0, // 多选计数
                selectList: [], // 多选数据
                dropDownContent: "展开",
                dropDownIcon: "ios-arrow-down",
                editTitle: "",
                selectNode: {},
                industryModalVisible: false,
                industryModalTitle: '添加行业',
                treeData: [],
                submitLoading: false,
                form: {
                    id: '',
                    enumCode: '',
                    enumName: '',
                    sortOrder: '',
                    enumType: ''
                },
                formValidate: {
                    enumName: [{required: true, message: "行业名称不能为空", trigger: "blur"}],
                    sortOrder: [{required: true, message: "行业排序不能为空", trigger: "blur"}],
                    enumCode: [{required: true, message: "行业编码不能为空", trigger: "blur"}]
                },
                searchForm: {
                    pageNumber: 1, // 当前页数
                    pageSize: 10, // 页面大小
                    sort: "c.createTime", // 默认排序字段
                    order: "desc", // 默认排序方式
                    courseTitle: "",
                    userName: "",
                    startDate: "",
                    endDate: "",
                    industry: 0
                },
                selectDate: null, //选择日期绑定modal
                columns: [
                    {
                        type: "index",
                        width: 60,
                        align: "center"
                    },
                    {
                        title: "证书名称",
                        align: "center",
                        key: "certificateName"
                    },
                    {
                        title: "证书code值",
                        width: 150,
                        align: "center",
                        key: "certificateCode"
                    },
                    {
                        title: "继续教育",
                        key: "isStudy",
                        align: "center",
                        width: 130,
                        render: (h, params) => {
                            let re = "";
                            if (params.row.isStudy === 1) {
                                return h("div", [
                                    h(
                                        "Tag",
                                        {
                                            props: {
                                                color: "green"
                                            }
                                        },
                                        "是"
                                    )
                                ]);
                            } else {
                                return h("div", [
                                    h(
                                        "Tag",
                                        {
                                            props: {
                                                color: "red"
                                            }
                                        },
                                        "否"
                                    )
                                ]);
                            }
                        }
                    },
                    {
                        title: "是否可用户添加",
                        key: "applyType",
                        align: "center",
                        width: 130,
                        render: (h, params) => {
                            let re = "";
                            if (params.row.applyType === 1) {
                                return h("div", [
                                    h(
                                        "Tag",
                                        {
                                            props: {
                                                color: "green"
                                            }
                                        },
                                        "是"
                                    )
                                ]);
                            } else {
                                return h("div", [
                                    h(
                                        "Tag",
                                        {
                                            props: {
                                                color: "red"
                                            }
                                        },
                                        "否"
                                    )
                                ]);
                            }
                        }
                    },
                    {
                        title: "学分兑换",
                        align: "center",
                        width: 150,
                        render: (h, params) => {
                            if (params.row.isChange === 0) {
                                return h("div", [
                                    h(
                                        "Tag",
                                        {
                                            props: {
                                                color: "red"
                                            }
                                        },
                                        "不可学分兑换"
                                    )
                                ]);
                            } else {
                                let msg = ''
                                let color = ''
                                if(params.row.isConvert === 0){
                                    msg = "兑换不用考试"
                                    color = "blue"
                                }else{
                                    msg = "兑换需要考试"
                                    color = "green"
                                }
                                return h("div", [
                                    h(
                                        "Tag",
                                        {
                                            props: {
                                                color: color
                                            }
                                        },
                                        msg
                                    )
                                ]);
                            }
                        }
                    },
                    {
                        title: "证书总学时",
                        align: "center",
                        width: 100,
                        key: "tagetPeriod",
                        render: (h, params) => {
                            let re = "";
                            if (params.row.tagetPeriod) {
                                re = params.row.tagetPeriod;
                            } else {
                                re = "--";
                            }
                            return h("div", re);
                        }
                    },
                    {
                        title: "继续教育费用",
                        width: 100,
                        align: "center",
                        key: "registrationFee",
                        render: (h, params) => {
                            let re = "";
                            if (params.row.registrationFee) {
                                re = params.row.registrationFee;
                            } else {
                                re = "--";
                            }
                            return h("div", re);
                        }
                    },
                    {
                        title: "证书对应学科",
                        tooltip: true,
                        align: "center",
                        key: "discipline",
                        render: (h, params) => {
                            let re = "";
                            if (params.row.discipline) {
                                re = params.row.discipline;
                            } else {
                                re = "--";
                            }
                            return h("div", re);
                        }
                    },
                    {
                        title: "操作",
                        key: "action",
                        width: 180,
                        align: "center",
                        render: (h, params) => {
                            let button = h("DropdownMenu", {slot: "list"}, [
                                h("DropdownItem", {props: {name: "transfercourse"}}, "兑换科目学分")
                            ])
                            if(params.row.isStudy == 1){
                                button = h("DropdownMenu", {slot: "list"}, [
                                    h("DropdownItem", {props: {name: "transfercourse"}}, "兑换科目学分"),
                                    h("DropdownItem", {props: {name: "condition"}}, "继续教育课程"),
                                ])
                            }
                            return h("div", [
                                h(
                                    "Button",
                                    {
                                        props: {
                                            type: "primary",
                                            size: "small"
                                        },
                                        style: {
                                            marginRight: "5px"
                                        },
                                        on: {
                                            click: () => {
                                                this.edit(params.row);
                                            }
                                        }
                                    },
                                    "编辑"
                                ),
                                h(
                                    "Dropdown",
                                    {
                                        props: {transfer: true},
                                        on: {
                                            "on-click": v => {
                                                this.changeDropDown(params.row, v);
                                            }
                                        }
                                    },
                                    [
                                        h(
                                            "Button",
                                            {
                                                props: {size: "small"},
                                                style: {
                                                    height: "23.5px"
                                                }
                                            },
                                            "更多操作 ∨"
                                        ),
                                        button
                                    ]
                                )
                            ]);
                        }
                    }],
                data: [], // 表单数据
                total: 0 // 表单数据总数
            }
        },
        methods: {
            handleDropdown(name) {
                if (name == "editIndustryType") {
                    if (!this.selectNode.id) {
                        this.$Message.warning("您还未选择要编辑的字典");
                        return;
                    }
                    this.editIndustryType();
                } else if (name == "delIndustryType") {
                    this.delIndustryType();
                } else if (name == "refreshIndustry") {
                    this.refreshIndustry();
                }
            },
            handelSubmitDict() {
                this.$refs.form.validate(valid => {
                    if (valid) {
                        this.submitLoading = true;
                        // 添加 避免编辑后传入id等数据 记得删除
                        this.form.enumType = 'industry'
                        addIndustry(this.form).then(res => {
                            this.submitLoading = false;
                            if (res.status === true) {
                                this.$Message.success("操作成功");
                                this.getAllType();
                                this.industryModalVisible = false;
                            }
                        });
                    }
                });
            },
            refreshIndustry() {
                this.getAllType();
                this.selectNode = {};
                this.editTitle = "";
                this.searchForm.industry = 0
                this.getDataList();
            },
            getAllType() {
                this.treeLoading = true;
                getAllTypeList().then(res => {
                    this.treeLoading = false;
                    this.treeData = res;
                });
            },
            addIndustryType() {
                this.form.id = ''
                this.form.enumCode = ''
                this.form.enumName = ''
                this.form.sortOrder = ''
                this.form.enumType = 'industry'
                this.industryModalTitle = "添加行业";
                this.$refs.form.resetFields();
                this.industryModalVisible = true;
            },
            editIndustryType() {
                this.industryModalTitle = "编辑行业";
                this.industryModalVisible = true;
            },
            delIndustryType() {
                if (!this.selectNode.id) {
                    this.$Message.warning("您还未选择要删除的行业");
                    return;
                }
                this.$Modal.confirm({
                    title: "确认删除",
                    loading: true,
                    content: "您确认要删除 " + this.selectNode.title + " ?",
                    onOk: () => {
                        // 删除
                        deleteIndustry(this.selectNode.id).then(res => {
                            this.$Modal.remove();
                            if (res.status === true) {
                                this.$Message.success("操作成功");
                                this.refreshIndustry();
                            }
                        });
                    }
                });
            },
            selectTree(v) {
                if(v.length < 1){
                    this.addExamBtn = true;
                    this.editTitle = ''
                    this.searchForm.industry = 0
                    // 重新加载表
                    this.searchForm.pageNumber = 1;
                    this.searchForm.pageSize = 10;
                    this.getDataList();
                    return
                }
                this.addExamBtn = false;
                this.editTitle = v[0].title;
                this.searchForm.industry = v[0].value
                for (let attr in v[0]) {
                    if (v[0][attr] === null) {
                        v[0][attr] = "";
                    }
                }
                let str = JSON.stringify(v[0]);
                let data = JSON.parse(str);
                this.selectNode = data;
                this.form = data;
                // 重新加载表
                this.searchForm.pageNumber = 1;
                this.searchForm.pageSize = 10;
                // 重新加载表
                this.getDataList();
            },
            changeDropDown(row, v) {
                if (v == "transfercourse") {
                    this.transfercourse(row);
                }
                if (v == "condition") {
                    this.continuing(row);
                }
            },
            init() {
                this.getAllType()
                this.getDataList();
            },
            getDataList() {
                this.loading = true;
                certificateList(this.searchForm).then(res => {
                    this.loading = false;
                    if (res.status === true) {
                        this.data = res.data.rows;
                        this.total = res.data.total;
                    }
                });
            },
            edit(v) {
                this.$refs.certificateDrawer.handelCancel();
                let query = {id: v.id, certificateName: v.certificateName, isChange: v.isChange, isConvert: v.isConvert, applyType: v.applyType,
                    isStudy: v.isStudy, award: v.award,certificatetemplate: v.certificatetemplate,industry: this.searchForm.industry,score: v.score };
                this.$refs.certificateDrawer.showDrawer(query);
            },
            add() {
                this.$refs.certificateDrawer.handelCancel();
                let query = {industry: this.searchForm.industry}
                this.$refs.certificateDrawer.showDrawer(query);
            },
            transfercourse(v) {
                this.$refs.transfercourseManage.showDrawer(v);
            },
            //继续教育课程管理
            continuing(v) {
                this.$refs.continuingManage.showDrawer(v);
            },
            //设置课程推荐状态
            handleSearch() {
                this.searchForm.pageNumber = 1;
                this.searchForm.pageSize = 10;
                this.getDataList();
            },
            handleReset() {
                this.$refs.searchForm.resetFields();
                this.searchForm.pageNumber = 1;
                this.searchForm.pageSize = 10;
                this.selectDate = null;
                this.searchForm.startDate = "";
                this.searchForm.endDate = "";
                // 重新加载数据
                this.getDataList();
            },
            dropDown() {
                if (this.drop) {
                    this.dropDownContent = "展开";
                    this.dropDownIcon = "ios-arrow-down";
                } else {
                    this.dropDownContent = "收起";
                    this.dropDownIcon = "ios-arrow-up";
                }
                this.drop = !this.drop;
            },
            selectDateRange(v) {
                if (v) {
                    this.searchForm.startDate = v[0];
                    this.searchForm.endDate = v[1];
                }
            },
            changePage(v) {
                this.searchForm.pageNumber = v;
                this.getDataList();
                this.clearSelectAll();
            },
            changePageSize(v) {
                this.searchForm.pageSize = v;
                this.getDataList();
            },
            changeSort(e) {
                this.searchForm.sort = e.key;
                this.searchForm.order = e.order;
                if (e.order === "normal") {
                    this.searchForm.order = "";
                }
                this.getDataList();
            },
            showSelect(e) {
                this.selectList = e;
                this.selectCount = e.length;
            },
            clearSelectAll() {
                this.$refs.table.selectAll(false);
            },
        },
        mounted() {
            this.init();
        }
    }
</script>
